import { useState, useEffect } from 'react';

// 头条面试
// 编写一个自定义的 hook。
// 要求：传递一个 promise，在 pending 的使用 返回 { loading: true, response: null, error: null } 状态;
//   interface IProps {
//     handler: Function
//   }
//   interface IResult {
//     isLoading: boolean;
//     invoker: Function;
//     data: unknow;
//   }

interface IProps {
  handler: Function;
}

interface IResult {
  loading: boolean;
  invoker: Function;
  response: unknown;
}

function usePending({ handler }: IProps) {
  const [result, setResult] = useState({
    loading: true,
    response: null,
    error: null,
  });

  const invoker = async () => {
    const res = await handler().catch((error) =>
      setResult({ ...result, error })
    );
    if (res.code === 0) {
      setResult({
        ...result,
        response: res.data,
        loading: false,
      });
    }
  };

  // 这样直接调用的弊端是，只要调用这个hooks，就会执行请求，而不能让用户自己保证请求时机，所以直接将请求暴露出去，让用户自己决定什么时候请求
  useEffect(() => {
    invoker();
  }, [handler]);

  return {
    ...result,
    invoker,
  } as IResult;
}

export default usePending;
